<template>
  <div>
    <div class="home-page">
      <van-swipe :autoplay="3000" class="my-swipe">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
      <van-search
        class="search"
        v-model="value"
        show-action
        label="上海"
        placeholder="请输入搜索关键词"
        @click="searchCity"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>

      <van-grid>
        <van-grid-item icon="wap-home-o" text="整租" to="/FindPage" />
        <van-grid-item icon="friends-o" text="合租" to="/FindPage" />
        <van-grid-item icon="guide-o" text="地图找房" />
        <van-grid-item icon="shop-collect-o" text="去出租" />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getImgs } from '@/api/article.js'
export default {
  components: {},
  name: 'home-page',
  data () {
    return {
      images: [],
      value: ''
    }
  },
  async created () {
    const res = await getImgs()
    this.images = res.body.map((item) => {
      return `http://121.199.51.160:8080${item.imgSrc}`
    })
  },
  methods: {
    searchCity () {
      this.$router.push('/CityPage')
    },
    onSearch () {}
  }
}
</script>

<style lang="less" scoped>
.home-page {
  margin-bottom: 50px;
  position: relative;
}
.home-page {
  img {
    width: auto;
    height: auto;
    max-height: 100%;
    max-width: 100%;
  }
  .search {
    position: absolute;
    top: 25px;
    width: 100%;
    padding: 0 10px;
  }
}
.van-grid-item_icon {
  background-color: #f4fbf7;
}
</style>
